<template>
    <div class="newSMS-box-v">
        <a-form :form="form" :key="newSMSKey">
            <a-form-item label="短信内容">
                <a-textarea
                    v-model:value="formState.fdxnr" 
                    placeholder="请输入短信内容"
                    v-decorator="['fdxnr', { initialValue:formState.fdxnr, rules: rules.fdxnr}]"
                    :autosize="{ minRows: 4, maxRows: 100 }" 
                    >
                </a-textarea>
            </a-form-item>
            <a-form-item label="通讯录">
                <div>
                    <a-button class="blue-btn" type="primary" @click="selectRecipientClick">选择</a-button>
                </div>
                <a-textarea
                    :key="fjsdxKey"
                    readonly
                    v-model:value="formState.fjsdx" 
                    placeholder="请输入通讯录"
                    :autosize="{ minRows: 4, maxRows: 100 }" 
                    >
                </a-textarea>
            </a-form-item>
            <a-form-item label="自定义">
                <div style="color: #ed5565;">填写接收人手机号，多个手机号请用-(英文输入法横杠)隔开。例: 13000000000-13100000000-13200000000</div>
                <a-textarea
                    v-model:value="formState.fzdydx" 
                    :key="newSMSKey"
                    placeholder="请输入自定义"
                    :autosize="{ minRows: 4, maxRows: 100 }" 
                    >
                </a-textarea>
            </a-form-item>
            <a-form-item label="定时任务时间">
                <a-date-picker 
                show-time  
                format="YYYY-MM-DD HH:mm:ss"
                placeholder="请选择定时任务时间" 
                v-model:value="formState.fdsrwsj"
                :key="newSMSKey"
                />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 14, offset: 8 }">
                <a-button class="blue-btn" type="primary" :loading="confirmLoading" @click="stagingClick" >暂存</a-button>
                <a-button class="blue-btn" type="primary" style="margin-left: 20px;" :loading="confirmLoading" @click="sendDirectly" >直接发送</a-button>
            </a-form-item>
        </a-form>
        <selectRecipient ref="selectRecipientRef" @selectRecipientData="selectRecipientData" :key="newSMSKey"/>
    </div>
</template>
<script>
import { join } from '@yuncheng/ych-components'
import selectRecipient from './selectRecipient.vue'
import { addUrl, sendUrl, queryById } from './service/index'
import moment from 'moment'
export default {
    components:{
        selectRecipient
    },
    props:{
        fdxlx:{
            type:String,
            default: () => '',
            required:false
        },
    },
    data(){
        return{
            confirmLoading:false,
            form: this.$form.createForm(this, { name: 'coordinated' }),
            formState:{},
            fjsdxKey:null,
            rules:{
                fdxnr: [{
                    required: true,
                    message: '请输入短信内容',
                    trigger: 'blur',
                }],
            },
            selectedArr:[],
            conditionData:{},
            newSMSKey:null,
            fdxnrKey:true,
        }
    },
    watch:{

    },
    mounted(){
        if(this.$route.query.id){
            queryById({id:this.$route.query.id}).then(res=>{
                if(res.code == 200){
                    this.formState = res.result?res.result:{}
                    if(res.result){
                        this.selectedArr = res.result.fjsdx?res.result.fjsdx.split(','):[]
                    }
                    
                    this.fjsdxKey=Date.now()
                    this.newSMSKey=Date.now()
                    
                }else{
                    this.$message.warning(res.message)
                }
            })
        }
    },
    methods:{
        selectRecipientClick(){//选择接收对象
            this.$refs.selectRecipientRef.selectRecipientVisible = true
            this.$refs.selectRecipientRef.getData(this.selectedArr,this.conditionData)
        },
        selectRecipientData(val,conditionData){//选择后的接收对象
            this.conditionData = conditionData
            //console.log(val)
            this.selectedArr = val
            let arr = []
            if(val.length){
                val.forEach(item => {
                    arr.push(item.name)
                });
            }
            //console.log(arr)
            
            this.formState.fjsdx = arr.length?arr.join(','):''
            //console.log(this.formState.fjsdx)
            this.fjsdxKey=Date.now()
        },
        stagingClick(){//暂存
            this.form.validateFields((err, values) => {
                if(!err){
                    this.confirmLoading = true
                    addUrl({...this.formState,
                        id:this.$route.query.id,
                        fdsrwsj:this.formState.fdsrwsj?moment(this.formState.fdsrwsj).format('YYYY-MM-DD HH:mm:ss'):'',
                        fdxlx:this.fdxlx,
                        }).then(res=>{
                        if(res.code == 200){
                            //console.log('暂存成功')
                            this.$message.success(res.message)
                            this.confirmLoading = false
                            this.fjsdxKey = Date.now()
                            this.newSMSKey = Date.now()
                            this.formState = {}
                            this.selectedArr = []
                            this.conditionData = {}
                            this.form.setFieldsValue({
                                fdxnr:'',
                            });
                            if(this.$route.query.id){
                                this.$store.commit("SET_REMOVEMENU",this.$route.fullPath)
                            }else{
                                this.$router.push('/messageManagement/SMSLogs')
                            }
                        }else{
                            this.confirmLoading = false
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
        sendDirectly(){//直接发送
            
            this.form.validateFields((err, values) => {
                if(!err){
                    this.confirmLoading = true
                    //console.log(moment(this.formState.fdsrwsj).format('YYYY-MM-DD HH:mm:ss'))
                    sendUrl({fdxlx:this.fdxlx,...this.formState,id:this.$route.query.id,fdsrwsj:this.formState.fdsrwsj?moment(this.formState.fdsrwsj).format('YYYY-MM-DD HH:mm:ss'):''}).then(res=>{
                        if(res.code == 200){
                            this.$message.success(res.message)
                            this.confirmLoading = false
                            this.fjsdxKey = Date.now()
                            this.newSMSKey = Date.now()
                            this.formState = {}
                            this.form.setFieldsValue({
                                fdxnr:'',
                            });
                            this.selectedArr = []
                            this.conditionData={}
                            if(this.$route.query.id){
                                this.$store.commit("SET_REMOVEMENU",this.$route.fullPath)
                            }
                        }else{
                            this.confirmLoading = false
                            this.$message.warning(res.message)
                        }
                    })
                }
            })
        },
    }
}
</script>
<style lang="less">
.newSMS-box-v{
    background: #fff;
    height: calc(100vh - 180px);
    overflow-y: auto;
    padding: 15px;
    .ant-form-item{
        width: 100% !important;
        display: flex ;
        align-content: center;
    }
    .ant-form-item-label{
        width: 100px;
        font-weight: 600;
    }
    .ant-form-item-control-wrapper{
        flex: 1;
    }
    .blue-btn{
        border: 1px solid #5ca3e5 !important;
        background-color: #5ca3e5 !important;
        color: #fff !important;
    }
}
</style>